<template>

  <Card title="排行" style="margin-top: 20px">
    <template #extra>
      <div style="display: flex;justify-items: center">
        <Tabs v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="团队" tab="按团队排行"></a-tab-pane>
          <a-tab-pane key="个人" tab="按个人排行"></a-tab-pane>

        </Tabs>

        <!--        v-model:value="value"-->
<!--        <Calendar style="width: 100%;margin-left: 15px;" :fullscreen="false" @panelChange="onPanelChange"-->
<!--                  valueFormat="YYYY-MM" />-->

      </div>

    </template>


    <List item-layout="horizontal" :data-source="dataList" :pagination="pagination">
      <template #renderItem="{ item, index }">
        <ListItem @click="goCard(item)">
          <ListItemMeta>
            <!--            <template #description>-->
            <!--              <span v-html="item.data"> </span>-->
            <!--            </template>-->
            <!--            <template #title> {{ item.name }} </template>-->
            <template #avatar>
              <!--              <Icon :icon="item.avatar" :size="30" />-->
              <div class="Personnel-list" style="display: flex;align-items: center;">
                <div style="width: 30px">{{ (page - 1) * 10 + (index + 1) }}</div>

                <div class="cu-avatar lg bg-blue radius"
                     style=" position: relative; width: 80rpx; height: 80rpx;margin-right: 10px;margin-left:10px;border-radius: 14rpx;">
                  <span class="avatar-text">{{ item.name.slice(item.name.length - 2,
                    item.name.length) }}</span>
                </div>
              </div>

            </template>

          </ListItemMeta>
          <div style="display: flex;width: 100%;">
            <div style="width: 200px;cursor: pointer">{{ item.name }}</div>
            <div style="color: gray;">{{ item.num }}</div>
          </div>
        </ListItem>
      </template>
    </List>
  </Card>
</template>

<script lang="ts" setup>
import { Card, List, Tabs, Calendar } from 'ant-design-vue';
//  import { dynamicInfoItems } from './data';
import util from '@/utils/util'
import { getRanks } from '@/api/heng/ex';

import { ref, onMounted } from 'vue';
import { useMessage } from "@/hooks/web/useMessage";
import { useGo } from '@/hooks/web/usePage';
const { createMessage } = useMessage();

const ListItem = List.Item;
const ListItemMeta = List.Item.Meta;

const activeKey = ref('团队');
const dateStr = ref("");
const dataList = ref([]);
const dateType = ref("month")
const go = useGo();
const onSelect = (value) => {
  //  console.log(value);
};



const page = ref(1);
const pageSize = ref(10);
const totalResult = ref(0);

function searchFn() {
  tableListFn()
}

function goCard(item) {
  if (activeKey.value == 1) {
    go({
      path: `/book/userCardList`, query: { userName: item.userName, dateStr: dateStr.value }
    })
  } else {

  }

}

function tableListFn() {
  let data = {
    type: activeKey.value

  };
  getRanks(data).then(res => {
    if (res.code == 200) {
      dataList.value = res.data;
      //   console.log("---dataList.value:",dataList.value)
      totalResult.value = res.data.totalResult;
      pagination.value.total = res.data.totalResult;
    } else {
      createMessage.error(res.message);
    }
  })
}

const pagination = ref(
  {
    onChange: (p: number, pz: number) => {
      // console.log("---p:",p);
      // console.log("---pz:",pz)
      page.value = p;
      pageSize.value = pz;
      pagination.value.pageSize = pz;
      tableListFn();
    },
    total: totalResult.value,
    pageSize: pageSize.value,
  }
);

function tabChange(e) {
  // console.log("--tabChange:",activeKey.value)
  searchFn()
}

onMounted(() => {
  let m = util.times("ym");
  dateStr.value = m;
  searchFn();
})


</script>
<style lang="less">
.ant-card-head {
  .ant-card-extra {
    width: 100%;
  }

  .ant-picker-panel {
    display: none;
  }
}

.ant-card-body {
  .ant-list-item-meta-avatar {
    margin-inline-end: unset !important;
  }
}

@color0: #ffffff; // Appears 2 times
@color1: #f1f1f1; // Appears 2 times

.Personnel-list {
  .cu-avatar {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 64upx;
    height: 64upx;
    margin: 0;
    margin-right: 4px;
    margin-left: 3px;
    padding: 0;
    background-color: #ccc;
    background-position: center;
    background-size: cover;
    color: #fff;
    font-size: 1.5em;
    font-variant: small-caps;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;

    .avatar-text {
      font-size: 0.4em;
    }

  }

  .bg-blue {
    background-color: #0081ff;
    color: #fff;
  }

  .cu-avatar.sm {
    width: 48upx;
    height: 48upx;
    font-size: 1em;
  }

  .cu-avatar.lg {
    flex-shrink: 0;
    width: 45px !important;
    height: 45px !important;
    font-size: 2em;
  }

  .cu-avatar.xl {
    width: 128upx;
    height: 128upx;
    font-size: 2.5em;
  }

  .radius {
    border-radius: 50%;
  }

  .cu-avatar-group {
    direction: rtl;
    display: inline-block;
    padding: 0 10upx 0 40upx;
    unicode-bidi: bidi-override;

    .cu-avatar {
      margin-left: -30upx;
      border: 4upx solid @color1;
      vertical-align: middle;
    }

    .cu-avatar.sm {
      margin-left: -20upx;
      border: 1upx solid @color1;
    }
  }
}
</style>
